<template>
    <div class="song-list">
        <!-- 风格导航 -->
        <div class="song-list-header">
            <mt-button
                    v-for="(item, index) in songStyle"
                    :key="index"
                    @click.native="handleChangeView(item.name)"
                    class="song-list-header-button"
                    :class="{ active: item.name === activeName }"
                    size="small"
            >{{ item.name }}</mt-button
            >
        </div>
        <!-- 歌单列表 -->
        <content-list :contentList="data"></content-list>
    </div>
</template>

<script>
    import ContentList from "../components/ContentList.vue";
    import { getAllSongList, getSongListOfLikeStyle } from "../utils/index";
    import { mixin } from "../minx/index";
    import { songStyle } from "../assets/data/songList";
    import axios from "axios";
    export default {
        name: "SongList",
        components: {
            ContentList,
        },
        data() {
            return {
                songsList: [{ name: "歌单", list: [] }], // 歌单
                albumDatas: [], //歌单数据
                songStyle: [], //风格
                activeName: "全部歌单", //当前风格
            };
        },
        computed: {
            //计算歌单中的数据
            data() {
                return this.albumDatas
            },
        },
        mounted() {
            this.songStyle = songStyle;
            this.getSongList(); // 获取歌单
        },
        methods: {
            getSongList() {
                getAllSongList().then((res) => {
                    this.albumDatas = res;
                });
            },
            //根据style显示对应的歌单
            handleChangeView(name) {
                this.activeName = name;
                this.albumDatas = [];
                if (name ==="全部歌单") {
                    this.getSongList();
                } else {
                    this.goSongListOfStyle(name);
                }
            },
            //根据style查询对应的歌单
            goSongListOfStyle(style) {
                axios.get("http://localhost:8888/songList/likeStyle",{params:{style:style}}).then(res => {
                    console.log(res.data)
                    // this.$store.commit("setListOfSongs", res.data);
                    this.albumDatas = res.data;
                    // this.secnseList = res.data;
                    // console.log(this.secnseList)
                    // //通过歌曲id获取歌曲信息
                    // for (let item of this.collection) {
                    //     this.getSongsOfIds(item.songId);
                    // }
                }).catch(err => {
                        console.log(err)
                    }
                )
                // getSongListOfLikeStyle(style).then((res) => {
                //     this.albumDatas = res;
                // });
                // songList/likeStyle?style
            },
        },
    }
</script>

<style lang="scss" scoped>
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .singerList {
        text-align: left;
    }
</style>
